@inherits BaseInputField

<div Class="flow-node-field">
    <MudText>@Port.Name</MudText>
    @if (_isEditableField)
    {
        @if (!_isXEditing)
        {
            <EditFieldButton Label="X" Value="@_value.X" Disabled="@(Port.IsLinkConvertable || Disabled)"
        Clicked="@OnXClicked" />
        }
        <div Class="mud-full-width"  hidden="@(!_isXEditing)">
            <MudNumericField @bind-Value="@_value.X" Class="flow-input-body" OnKeyUp="@OnKeyUp" OnBlur="@OnFocusOut" />
        </div>
        @if (!_isYEditing)
        {
            <EditFieldButton Label="Y" Value="@_value.Y" Disabled="@(Port.IsLinkConvertable || Disabled)"
        Clicked="@OnYClicked" />
        }
        <div Class="mud-full-width"  hidden="@(!_isYEditing)">
            <MudNumericField @bind-Value="@_value.Y" Class="flow-input-body" OnKeyUp="@OnKeyUp" OnBlur="@OnFocusOut" />
        </div>
        @if (!_isWidthEditing)
        {
            <EditFieldButton Label="Width" Value="@_value.Width" Disabled="@(Port.IsLinkConvertable || Disabled)"
        Clicked="@OnWidthClicked" />
        }
        <div Class="mud-full-width"  hidden="@(!_isWidthEditing)">
            <MudNumericField @bind-Value="@_value.Width" Class="flow-input-body" OnKeyUp="@OnKeyUp"
            OnBlur="@OnFocusOut" />
        </div>
        @if (!_isHeightEditing)
        {
            <EditFieldButton Label="Height" Value="@_value.Height" Disabled="@(Port.IsLinkConvertable || Disabled)"
        Clicked="@OnHeightClicked" />
        }
        <div lass="mud-full-width"  hidden="@(!_isHeightEditing)">
            <MudNumericField @bind-Value="@_value.Height" Class="flow-input-body" OnKeyUp="@OnKeyUp"
            OnBlur="@OnFocusOut" />
        </div>
    }
</div>
